<template>
  <el-dialog class="goods_dialog" width="1000px" title="添加商品" :visible.sync="dialogVisible" :close-on-click-modal="false">
    <div>
      <el-form :inline="true" :model="searchForm">
        <el-form-item>
          <el-input v-model="searchForm.goods_name" placeholder="请输入商品ID或名称" />
        </el-form-item>
        <el-form-item>
          <el-select v-model="searchForm.cate_id" clearable placeholder="请选择商品品类">
            <el-option v-for="item in categoryList" :key="item.id" :label="item.name" :value="item.id" />
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-input v-model="searchForm.shop_name" placeholder="请输入供应商" clearable />
        </el-form-item>
        <el-form-item>
          <el-button size="small" type="primary" @click="search()">查询</el-button>
          <el-button size="small" @click="reset()">重置</el-button>
        </el-form-item>
      </el-form>
      <el-table :data="tableData" border style="width: 100%">
        <el-table-column label="商品信息" width="350">
          <template slot-scope="scope">
            <div class="flex">
              <el-image style="width: 60px; height: 60px" :src="scope.row.imgurl ? $globalObj.imgBaseUrl + scope.row.imgurl : ''">
                <div slot="error" class="image-slot">
                  <i class="el-icon-picture-outline" />
                </div>
              </el-image>
              <div class="flex-1 text-left" style="padding-left:15px;">
                <p class="color-999">{{ scope.row.goods_id }}</p>
                <p class="color-666">{{ scope.row.title }}</p>
              </div>
            </div>
          </template>
        </el-table-column>
        <el-table-column prop="pact_type" label="租赁方式" align="center" />
        <el-table-column prop="cate_name" label="品类" align="center" />
        <el-table-column prop="shopname" label="供应商" align="center" />
        <el-table-column fixed="right" label="操作" width="180" align="center">
          <template slot-scope="scope">
            <el-button v-if="scope.row.is_choose == 2" type="primary" size="mini" @click="add(scope.row.goods_id)">参与活动</el-button>
          </template>
        </el-table-column>
      </el-table>
      <div class="text-right" style="margin-top:15px;">
        <el-pagination :current-page.sync="searchForm.page" :page-size="pageSize" layout="total, prev, pager, next" :total="total" prev-text="上一页" next-text="下一页" background @current-change="handleCurrentChange" />
      </div>
    </div>
    <div slot="footer" class="dialog-footer">
      <el-button type="primary" size="small" @click="dialogVisible = false">关 闭</el-button>
    </div>
  </el-dialog>
</template>

<script>
import { getCategoryList } from '@/api/recommend'
import { addList, chooseGoods } from '@/api/xcx'
export default {
  // props: ['cateId'],
  props: {
    cateId: {
      type: String,
      default: ''
    }
  },
  data() {
    return {
      dialogVisible: false,
      searchForm: {
        page: 1,
        goods_name: '',
        cate_id: '',
        shop_name: ''
      },
      categoryList: [],
      total: 0,
      tableData: [],
      pageSize: 5
    }
  },
  watch: {
    dialogVisible(val) {
      if (val) {
        this.getSelectList()
        this.$nextTick(() => {
          this.getList()
        })
      } else {
        // 重置
        this.searchForm = {
          page: 1,
          goods_name: '',
          cate_id: '',
          shop_name: ''
        }
      }
    }
  },
  methods: {
    add(id) {
      addList({
        goodsId: id,
        listCateId: this.cateId
      }).then(res => {
        this.getList()
        this.$emit('getList')
      })
    },
    getList() {
      chooseGoods({ pageSize: this.pageSize, list_cate_id: this.cateId, ...this.searchForm }).then(res => {
        this.tableData = res.data
        this.total = res.total
      })
    },
    // 页码切换
    handleCurrentChange(val) {
      this.searchForm.page = val
      this.getList()
    },
    search() {
      this.searchForm.page = 1
      this.getList()
    },
    reset() {
      this.searchForm = {
        page: 1,
        goods_name: '',
        cate_id: '',
        shop_name: ''
      }
      this.getList()
    },
    getSelectList() {
      getCategoryList().then(res => {
        this.categoryList = res || []
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.el-form .el-input,
.el-select {
  width: 180px;
}
</style>
